{__NOLAYOUT__}
<layout name="no_nav" />

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <a class="row-item row-item-auto top-bar-back" href="javascript:window.history.back()">返回</a>
  <h3 class="row-item top-bar-name">个人中心</h3>
  <a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<!-- 头像 -->
<section class="my-head">
  <figure class="my-head-content">
    <p class="my-head-img">
      <img id="head" src="{$user.face}" alt="" style="border-radius: 50%;">
      <input id="upload-head" class="my-header-file-input" type="file" accept="image/*">
    </p>
    <p class="my-head-name">{$user.nickname}</p>
  </figure>
</section>

<section class="my-list menu-list">
  <foreach name="types" item="vo" key="k">
  <a class="menu-list-item menu-list-link" href="{:U('DisShopOrder/list','type='.$k.'&sid='.$sid)}">
    <div class="menu-list-media"></div>
    <div class="menu-list-inner">
      <p class="menu-list-title">{$vo}</p>
    </div>
  </a>
  </foreach>
</section>

<section class="my-list menu-list">
  <a class="menu-list-item" href="{:U('DisShop/myCust', 'sid='.$sid)}">
    <div class="menu-list-inner">
      <p class="menu-list-title">我的客户({$user.subCount})</p>
    </div>
  </a>
  <a class="menu-list-item" href="{:U('DisShop/disOrder', 'sid='.$sid)}">
    <div class="menu-list-inner">
      <p class="menu-list-title">我的订单({$user.orderCount})</p>
    </div>
  </a>
  <a class="menu-list-item" href="{:U('DisShop/myBonus', 'sid='.$sid)}">
    <div class="menu-list-inner">
      <p class="menu-list-title">我的积分({$user.bonus})</p>
    </div>
  </a>
</section>

<section class="my-list menu-list">
  <a class="menu-list-item" href="{:U('disShopDeliverAddress/deliverAddressList', 'sid='.$sid)}">
    <div class="menu-list-inner">
      <p class="menu-list-title">地址管理</p>
    </div>
  </a>
  <a class="menu-list-item" href="{:U('DisShop/myBankList', 'sid='.$sid.'&mode=edt')}?back={$backUrl}">
    <div class="menu-list-inner">
      <p class="menu-list-title">已绑定的银行卡</p>
    </div>
  </a>
</section>

<script type="text/javascript">
  $(function(){
    
    $("#upload-head").on("change", function(e) {

      var f = e.target.files[0];
      if ( f.type.match(/image/) ) {
        if ( f.size > 204800 ) {
          APP.alert("上传的头像不能大于200KB");
          return false;
        };
      } else {
        APP.alert("请选择图片上传");
        return false;
      };

      var xhr = new XMLHttpRequest(),
          fm = new FormData();
      fm.append( "sid", 1 );
      fm.append( "Filedata", f );
      xhr.onreadystatechange = function(e) {
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          var response = JSON.parse( xhr.responseText );
          $("#head").attr("src", response.extra.url)
        };
      };
      xhr.open("post", "{:U('User/face')}", true);
      xhr.send(fm);

    });

  });
</script>